<template>
  <div class="translator" :class="{ hide }">
    <div class="main">
      <Icon name="translate" size="20" class="left"></Icon>
      <div class="center text-center font-size-14 font-weight-400 line-height-140">
        <span v-if="user.translate" class="pointer" @click="throttleToggleTranslate(user.id, false)"
          >{{ $t('premium.trans.showOrig') }}<span class="text-primary">{{ $t('premium.trans.content') }}</span></span
        >
        <span v-else :class="{ pointer: !hide }" @click="throttleToggleTranslate(user.id, true)"
          >{{ $t('premium.trans.to')
          }}<span v-if="user.translateLang" class="text-primary">{{
            $t(`lang.${user.translateLang.replace('-', '_')}`)
          }}</span></span
        >
      </div>
      <Icon name="more" size="20" class="right pointer" ref="more" @click="onMoreClick"></Icon>
    </div>
    <div v-show="panelOpen" class="panel gap-row-8 font-size-14 font-weight-500 line-height-140" ref="panel">
      <div v-show="langOpen" class="lang gap-col-8">
        <div class="back gap-row-8 pointer" @click="langOpen = false">
          <Icon name="arrowLeft" size="12"></Icon><span>{{ $t('common.back') }}</span>
        </div>
        <div class="divider"></div>
        <ul>
          <li v-for="locale in locales" :key="locale.value" class="pointer" @click="changeLang(user.id, locale.value)">
            <span>{{ $t(`lang.${locale.label}`) }}</span>
            <Icon v-if="user.translateLang === locale.value" class="me-1 icon-size-12" name="check"></Icon>
          </li>
        </ul>
      </div>
      <ul class="setting">
        <li class="pointer" @click="langOpen = true">{{ $t('premium.trans.toOtherLang') }}</li>
        <li v-if="!hide" class="pointer" @click="onHideClick">{{ $t('premium.trans.hide') }}</li>
        <li v-if="hide" class="pointer" @click="onShowClick">{{ $t('premium.trans.show') }}</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { onClickOutside, useThrottleFn } from '@vueuse/core'
import { storeToRefs } from 'pinia'
import { useChatStore } from '@/store/chat'
import { $t, locales } from '@/i18n'

const props = defineProps({
  user: { type: Object, required: true },
  hideMode: { type: Boolean, default: false },
})

const chatStore = useChatStore()
const { translatorOpen } = storeToRefs(chatStore)
const { openTranslator, closeTranslator, translate, unTranslate } = chatStore
const throttleToggleTranslate = useThrottleFn(
  (userId, isTranslate) => (isTranslate ? translate(userId) : unTranslate(userId)),
  1000,
)

const hide = computed(() => props.hideMode && !translatorOpen.value)

const panelOpen = ref(false)
const langOpen = ref(false)

function closePanel() {
  panelOpen.value = false
  langOpen.value = false
}

function changeLang(userId, lang) {
  translate(userId, lang)
  closePanel()
}

function onMoreClick() {
  if (panelOpen.value) {
    closePanel()
  } else {
    panelOpen.value = true
  }
}

function onHideClick() {
  closePanel()
  setTimeout(closeTranslator, 32)
}

function onShowClick() {
  closePanel()
  openTranslator()
}

const panel = ref(null)
const more = ref(null)
onClickOutside(panel, closePanel, { ignore: [more] })
</script>

<style lang="scss" scoped>
.translator {
  position: relative;

  .main {
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    background-color: rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s;

    .left,
    .center {
      transition: opacity 0.2s;
    }

    .center {
      flex-grow: 1;
    }
  }

  .panel {
    display: flex;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;

    .setting,
    .lang {
      height: fit-content;
      border-radius: 0.5rem;
      background: rgba(var(--v-theme-background), 0.75);
      border: 1px solid rgba(var(--v-theme-input), 0.6);

      li {
        padding: 0.5rem 1rem;
        list-style: none;

        &:hover {
          background: rgba(var(--v-theme-gray-x), 0.5);
        }
      }
    }

    .setting {
      width: 8.125rem;
      padding: 1rem 0 1.25rem;

      li {
        overflow-wrap: break-word;
      }
    }

    .lang {
      padding: 0.5rem 0;
      display: flex;
      flex-direction: column;

      .back {
        padding: 0 1rem;
        display: flex;
        align-items: center;
      }

      .divider {
        height: 1px;
        background: rgba(var(--v-theme-graydisabled), 0.4);
      }

      ul {
        height: 13.375rem;
        overflow: auto;
        &::-webkit-scrollbar {
          display: flex;
          width: 0.25rem;
        }
        &::-webkit-scrollbar-thumb {
          background: rgba(var(--v-theme-graydisabled), 0.4);
          background-clip: content-box;
          border-radius: 0.25rem;
        }
        li {
          width: 8rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
  }

  &.hide {
    .main {
      background-color: rgba(0, 0, 0, 0);
      .left,
      .center {
        opacity: 0;
      }
    }
  }
}
</style>
